<script setup lang="ts">
import { changeNumFn, getCartListFn, removeFn, selectallFn, selectoneFn } from '@/api/cart';

import { onMounted, reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { showToast } from 'vant';
import { useUserInfoStore } from '@/stores/user';

interface iCart {
    cartid: string;
    userid: string;
    num: number;
    flag: boolean;
    img1: string;
    proname: string;
    originprice: number;
    proid: string;
    discount: number;
}

const userinfo = useUserInfoStore()

const state: { cartList: iCart[] } = reactive({
    cartList: []
})

async function getCartList() {
    const res = await getCartListFn(userinfo.userinfo.userid)
    // console.log(res);
    state.cartList = res.data.data
    if (!res.data.data) {
        return
    }
    // 检查是否全选
    isSelectAll()
    // 计算总价格
    getPriceAll()
}

onMounted(() => {
    getCartList()
})

// ---------------- 更新购物车数量
function changeNumClick(num: number, cart: iCart) {

    // 判断点击的是减
    if (num == -1) {
        // 判断当前为 1 就不能再减了
        if (cart.num == 1) {
            showToast('购物车数量为 1 不能在减了！')
            return
        }
    }


    changeNumFn({
        cartid: cart.cartid,
        num: cart.num + num
    }).then(res => {
        // console.log(res);
        showToast(res.data.message)
        getCartList()
    })
}
// -------------- changeCheckBox(cart) 更新当前状态
function changeCheckBox(cart: iCart) {
    selectoneFn({
        cartid: cart.cartid,
        flag: cart.flag
    }).then(res => {
        showToast(res.data.message)
        // 验证是否为全选
        isSelectAll()
        // 计算总价格
        getPriceAll()
    })
}

// -------------- 验证是否为全选
const isAll: Ref<boolean, boolean> = ref(false)
function isSelectAll() {
    for (let i = 0; i < state.cartList.length; i++) {
        const cart = state.cartList[i];
        if (!cart.flag) {
            // 没有全选
            isAll.value = false
            return
        }
    }

    // 如果循环完成后没有 return，就说明全选了
    isAll.value = true

}

// -------------- changeAll 全选selectallFn
function changeAll() {
    selectallFn({
        userid: userinfo.userinfo.userid,
        type: isAll.value
    }).then(res => {
        // 重新获取数据
        getCartList()
    })
}

// --------------- 计算总价
const priceAll: Ref<number, number> = ref(0)
function getPriceAll() {
    if (!state.cartList.length) return

    let num = 0
    for (let i = 0; i < state.cartList.length; i++) {
        const cart = state.cartList[i];
        if (cart.flag) {
            num += cart.originprice * cart.discount * 0.1 * cart.num * 100
        }
    }
    priceAll.value = num
}

// --------------- 删除点击事件
function delCartClick(cart: iCart) {
    removeFn({
        cartid: cart.cartid
    }).then(res => {
        if (res.data.code == 200) {
            getCartList()
        }
        showToast(res.data.message)
    })
}
</script>
<template>
    <main class="box">
        <header class="header">
            <span>头部-购物车</span>
        </header>

        <div v-if="state.cartList" class="content">
            <van-swipe-cell v-for="cart in state.cartList" :key="cart.cartid">
                <van-card :price="(cart.originprice * cart.discount * 0.1).toFixed(2)" :origin-price="cart.originprice"
                    :title="cart.proname" class="goods-card">
                    <template #thumb>
                        <div class="img-box">
                            <van-checkbox @change="changeCheckBox(cart)" v-model="cart.flag"></van-checkbox>
                            <van-image :src="cart.img1"></van-image>
                        </div>
                    </template>


                    <template #footer>
                        <div class="footer-num">
                            <van-button @click="changeNumClick(-1, cart)" size="mini">-</van-button>
                            <van-tag>{{ cart.num }}</van-tag>
                            <van-button @click="changeNumClick(1, cart)" size="mini">+</van-button>
                        </div>
                    </template>

                </van-card>


                <template #right>
                    <van-button @click="delCartClick(cart)" square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>


            <van-submit-bar :price="priceAll" button-text="提交订单">
                <van-checkbox @click="changeAll" v-model="isAll">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span>修改地址</span>
                </template>
            </van-submit-bar>

        </div>
        <div class="content" v-else>
            <img style="width: 100vw; height: 100vw;"
                src="https://img.mp.sohu.com/upload/20170401/2f523043409747a9b68c1bcf6fd353a5_th.jpeg" alt="">
        </div>

    </main>
</template>


<style scoped lang="scss">
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.img-box {
    display: flex;

    .van-image {
        width: 70px;
    }
}

.footer-num {
    float: right;
    position: relative;
    bottom: 26px;
    display: flex;
    justify-content: center;
    width: 100px;

    .van-tag {
        padding: 0 10px;
        margin-left: 4px;
    }

    .van-button {
        padding: 0 10px;
    }
}

.van-submit-bar {
    bottom: .5rem;
}
</style>
